<style scoped>
/* eslint-disable */
.alert_bottom {
  margin-bottom: 20px;
}

.titleclass {
  font-size: 13px;
  font-weight: bold;
  color: #2b3645;
}
.shortdesc {
  text-align: justify;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.typeclass {
  color: #5390f0;
}
.statusingClass {
  color: #5390f0;
}
.statusendClass {
  color: green;
}

.recordshortcontent {
  text-align: justify;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* min-height: 40px; */
  margin: 0px 0px;
}
.taketimeclass {
  width: 30%;
  float: right;
  font-size: 10px;
  margin-top: 10px;
  text-align: right;
  color: #5390f0;
}
.timelinedivclass {
  max-height: 600px;
  min-height: 400px;
  width: 100%;
  overflow: scroll;
}
/* eslint-disable */
</style>
<template>
  <div>
    <el-row style="margin-top:20px" type="flex" justify="center">
      <el-col :span="23">
        <el-form ref="searchForm" :model="searchForm" label-width="80px" :inline="true">
          <el-form-item label="文章标题" prop="username">
            <el-input v-model="searchForm.username"></el-input>
          </el-form-item>
          <el-form-item label="文章类型" prop="phone">
            <el-input v-model="searchForm.phone"></el-input>
          </el-form-item>
          <el-button size="small" type="primary" @click="init">搜索</el-button>
          <el-button size="small" @click="resetSearch('searchForm')">重置</el-button>
        </el-form>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" style="margin-bottom:10px">
      <el-col :span="23">
        <el-button size="small" icon="el-icon-plus" type="primary" @click="addPlanInfo">添加计划</el-button>
        <el-button size="small" icon="el-icon-minus" type="danger" @click="deleteUsers">批量删除</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="23">
        <el-alert title type="success" :closable="false" show-icon   class="alert_bottom">
          已选择
          <span>{{0}}</span> 项
          <a @click="clearSelectAll" style="color:red">清空</a>
        </el-alert>

        <el-table
          size="small"
          ref="multipleTable"
          :border="false"
          :data="tableData"
          tooltip-effect="dark"
          style="width:100%"
          height="700"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="id" label="ID" width="60"></el-table-column>
          <el-table-column prop="planImage" label="计划封面" width="250" align="center">
            <template slot-scope="scope">
              <img style="width:200px;height:90px" :src="scope.row.planImage" />
            </template>
          </el-table-column>
          <el-table-column prop="planName" label="计划标题" width="200" align="center">
            <template slot-scope="scope">
              <p class="titleclass">{{scope.row.planName}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="planDesc" width="250" label="计划短描述" align="center">
            <template slot-scope="scope">
              <p class="shortdesc">{{scope.row.planDesc}}</p>
            </template>
          </el-table-column>

          <el-table-column prop="progress" label="计划进度" align="center">
            <template slot-scope="scope">
              <el-progress :width="70" type="circle" :percentage="Number(scope.row.progress)"></el-progress>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="计划状态" align="center">
            <template slot-scope="scope">
              <p class="statusingClass" v-if="scope.row.status === '进行中'">{{scope.row.status}}</p>
              <p class="statusendClass" v-if="scope.row.status === '结束'">{{scope.row.status}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="执行天数" align="center"></el-table-column>

          <!-- <el-table-column prop="blogTypeName" label="文章类型" width="150" align="center">
            <template slot-scope="scope">
              <p class="typeclass">{{scope.row.blogTypeName}}</p>
            </template>
          </el-table-column>-->
          <!-- <el-table-column prop="thumbCount" label="点击量" align="center"></el-table-column> -->
          <el-table-column prop="startTime" label="开始日期" align="center"></el-table-column>
          <el-table-column prop="endTime" label="结束日期" align="center"></el-table-column>
          <!-- <el-table-column prop="createTime" label="创建日期" align="center"></el-table-column> -->
          <!-- <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column> -->
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button @click="records(scope.row)" type="primary" size="mini">记录</el-button>
              <el-button @click="editPlanInfo(scope.row)" type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row type="flex" justify="end">
      <el-col :span="8">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNumber"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- :fullscreen="true" -->
    <el-dialog
      top="6vh"
      :title="titleText"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="closeDialog"
    >
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="计划名称">
              <el-input v-model="form.planName" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="计划简要">
              <el-input
                type="textarea"
                :rows="3"
                style="width:350px"
                placeholder="请输入内容"
                v-model="form.planDesc"
              ></el-input>
              <!-- <el-input v-model="form.shortDesc" style="width:300px"></el-input> -->
            </el-form-item>

            <el-form-item label="计划封面">
              <el-input v-model="form.planImage" style="width:350px"></el-input>
              <el-upload
                :on-success="uploadSuccess"
                class="upload-demo"
                style="width:350px"
                drag
                action="http://localhost:9001/blogs-admin/image/upload/"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将图片拖到此处，或
                  <em>点击上传</em>
                </div>
                <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
              <img
                v-if="form.planImage != null"
                style="width:200px;height:200px"
                :src="form.planImage"
              />
            </el-form-item>

            <el-form-item label="时间范围">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                align="right"
                value-format="yyyy-MM-dd"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="博客类型" style="width:300px">
              <el-select v-model="form.blogTypeId" placeholder="请选择">
                <el-option
                  v-for="item in blogTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>-->
          </el-form>
          <!-- <mavon-editor
            style="height:400px"
            :toolbars="toolbars"
            @imgAdd="handleEditorImgAdd"
            @imgDel="handleEditorImgDel"
            v-model="value"
            @change="change"
            ref="md"
          />-->
        </el-col>
      </el-row>
      <el-row type="flex" justify="end" style="margin-top:20px">
        <el-col :span="7">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" @click="submit" type="primary">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog title :visible.sync="recordDetailDialogVisible" width="60%" top="6vh">
      <el-button size="small" @click="editRecordDetail" type="primary">编辑</el-button>
      <markdown-editor :content="journalHtmlContent"></markdown-editor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="recordsDialogVisible" width="60%" top="6vh">
      <el-button
        style="margin-left:40px;margin-bottom:40px"
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="addPlanExecuteRecord"
      >添加执行记录</el-button>

      <div class="timelinedivclass">
        <el-timeline>
          <el-timeline-item
            v-for="record in recordList"
            :key="record.id"
            style="width:90%;padding:10px;"
            color="#0bbd87"
            :timestamp="record.title"
            placement="top"
          >
            <a @click="todetail(record)">
              <el-card style="min-height:100px">
                <!-- <h4>更新 Github 模板</h4> -->
                <p class="recordshortcontent">{{record.journalShortContent}}</p>
                <el-progress
                  style="width:50%;margin-top:10px;float:left"
                  :stroke-width="8"
                  :percentage="Number(record.progress)"
                  status="success"
                ></el-progress>
                <p class="taketimeclass">耗时: {{record.takeTime}}分钟</p>
                <!-- <p>{{record.takeTime}}</p>
                -->
              </el-card>
            </a>
          </el-timeline-item>
        </el-timeline>
        <!-- <Col span="4">
            <el-button size="small" icon="el-icon-plus" type="primary" @click="addPlanInfo">添加计划</el-button>
        </Col>-->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog top="6vh" title="新增日记" :visible.sync="executeReocrdDialogVisible" width="60%">
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <el-form ref="form" :model="recordform" label-width="80px">
            <el-form-item label="日记标题">
              <el-input v-model="recordform.title" style="width:250px"></el-input>
            </el-form-item>
            <el-form-item label="日记时间">
              <el-date-picker
                v-model="recordform.createDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width:250px"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="日记简要">
              <el-input v-model="recordform.journalShortContent" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="耗时(分钟)">
              <el-input v-model="recordform.takeTime" style="width:250px"></el-input>
            </el-form-item>

            <el-form-item label="进度">
              <el-slider v-model="recordform.progress" style="width:250px"></el-slider>
              <!-- <el-input v-model="recordform.progress" style="width:250px"></el-input> -->
            </el-form-item>
          </el-form>
          <mavon-editor
            style="height:400px"
            :toolbars="toolbars"
            @imgAdd="handleEditorImgAdd"
            @imgDel="handleEditorImgDel"
            v-model="value"
            @change="changeRecordMarkdown"
            ref="md"
          />
        </el-col>
      </el-row>
      <el-row type="flex" justify="end" style="margin-top:20px">
        <el-col :span="7">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" @click="submitRecord" type="primary">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { findPlanByCondition, submitPlanInfo } from "@/api/plan/plan-api";
import {
  getPlanExecuteRecords,
  submitExecuteRecordInfo,
} from "@/api/plan/plan-execute-records-api";
import { upload } from "@/api/blog/blog-api";
import MarkdownEditor from "@/components/Markdown/markdown-editor";

export default {
  /* eslint-disable */
  name: "planlist",
  components: {
    MarkdownEditor,
  },
  data() {
    return {
      recordList: [],

      dateRange: "",
      statusList: [
        {
          value: "未开始",
          label: "未开始",
        },
        {
          value: "进行中",
          label: "进行中",
        },
        {
          value: "已结束",
          label: "已结束",
        },
        {
          value: "放弃",
          label: "放弃",
        },
      ],
      //edit / add
      titleText: "新增",
      dialogVisible: false,
      recordsDialogVisible: false,
      recordDetailDialogVisible: false,
      executeReocrdDialogVisible: false,

      journalHtmlContent: "",
      journalTitle: "",
      executeRecordId: "",
      executeRecordItem:{},

      // page
      total: 0,
      searchForm: {
        pageNumber: 0,
        pageSize: 10,
      },
      //executepage
      executeForm: {
        pageNumber: 0,
        pageSize: 10,
        planId: "",
      },
      form: {
        planImage: "",
      },

      recordform: {},
      tableData: [],

      //markdown

      value: "",
      html: "",

      blogInfo: {
        blogMdContent: "",
        blogContent: "",
        blogImageUrl: "",
      },
      blogTypeList: [
        {
          id: "",
          typeName: "",
        },
      ],

      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },

  methods: {
    editRecordDetail() {
        console.log( this.executeRecordItem);
        this.executeRecordItem.progress = Number(this.executeRecordItem.progress);
        console.log( this.executeRecordItem);
        this.recordform = this.executeRecordItem;
        this.value = this.executeRecordItem.journalMdContent
        this.addPlanExecuteRecord();

    },
    //监听markdown变化
    changeRecordMarkdown(value, render) {
      this.recordform.journalMdContent = value; //md
      this.recordform.journalContent = render; //html
    },
    todetail(item) {
      console.log(item);
      this.journalHtmlContent = item.journalContent;
      this.journalTitle = item.title;
      //this.executeRecordId = item.id;
      this.executeRecordItem = item;
      this.recordDetailDialogVisible = true;
    },
    addPlanExecuteRecord() {
      this.executeReocrdDialogVisible = true;
    },
    addPlanInfo() {
      this.dialogVisible = true;
    },
    deleteUsers() {},
    clearSelectAll() {},
    handleSelectionChange() {},
    findPlanExecuteRecords() {
      getPlanExecuteRecords(this.executeForm).then((res) => {
        console.log(res);
        this.recordList = res.data.content;
        this.recordsDialogVisible = true;
      });
    },
    records(row) {
      console.log(row);
      this.executeForm.planId = row.id;
      this.findPlanExecuteRecords();
    },
    editPlanInfo(row) {
      getBlogInfoById(row.id).then((res) => {
        console.log(res);
        // var typeId = res.data.blogTypeId;
        // typeId = typeId.toString();
        // res.data.blogTypeId = typeId;
        this.form = res.data;
        this.value = this.form.blogMdContent;
      });

      this.dialogVisible = true;
    },
    init() {
      findPlanByCondition(this.searchForm).then((response) => {
        if (response.msg === "success") {
          console.log(response);
          this.total = response.data.totalElements;
          this.tableData = response.data.content;
        }
      });
    },

    //重置
    resetSearch(formName) {
      this.$refs[formName].resetFields();
      this.init();
    },
    //page
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.init();
    },
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber;
      this.init();
    },

    closeDialog() {
      this.dialogVisible = false;
    },
    closeExecuteRecordDialog() {
      this.executeReocrdDialogVisible = false;
    },
    submitRecord() {
      console.log(this.recordform);
      this.recordform.planId = this.executeForm.planId;
      submitExecuteRecordInfo(this.recordform).then((response) => {
        if (response.msg === "success") {
          this.$message({ message: "提交成功", type: "success" });
          this.closeExecuteRecordDialog();
          this.findPlanExecuteRecords();
        }
      });
    },

    submit() {
      console.log(this.dateRange);
      this.form.startTime = this.dateRange[0];
      this.form.endTime = this.dateRange[1];

      submitPlanInfo(this.form).then((response) => {
        if (response.msg === "success") {
          this.$message({ message: "提交成功", type: "success" });
          this.closeDialog();
          this.init();
        }
      });
    },

    uploadSuccess(res) {
      console.log(res);
      this.form.planImage = res.data;
      console.log(this.form.planImage);
    },

    //监听markdown变化
    change(value, render) {
      this.html = render;
      this.form.blogMdContent = value;
      this.form.blogContent = render;
    },
    //上传图片接口pos 表示第几个图片
    handleEditorImgAdd(pos, $file) {
      var formdata = new FormData();
      formdata.append("file", $file);

      upload(formdata).then((res) => {
        console.log(res);
        var url = res.data;
        this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
      });
      //   this.$axios
      //     .post("http://localhost:8000/blogs/image/upload/", formdata)
      //     .then((res) => {
      //       var url = res.data.data;
      //       this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
      //     });
    },
    handleEditorImgDel() {
      console.log("handleEditorImgDel"); //我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
    },
  },

  created() {
    this.init();
  },
};
</script>

